<template>
    <main class="show">
        <b-view-header :config="showIndexViewConfig">
            <template #footer>
                <u-button-group></u-button-group>
            </template>
        </b-view-header>
        <!-- 对于router-view 使用动画，需要以这种方式引入 -->
        <router-view v-slot="{ Component }">
            <transition name="fade" mode="out-in">
                <component :is="Component" />
            </transition>
        </router-view>
        <!-- <router-view /> -->
    </main>
</template>
<script>
    import BViewHeader from '@b/view-header.vue';
    import { showIndexViewConfig } from '@vp/show/index.js';
    import { useButtonGroup } from '@u/button-group.js';
    export default {
        components: {
            BViewHeader,
            UButtonGroup: useButtonGroup(showIndexViewConfig.buttonGroup)
        },
        setup() {

            return {
                showIndexViewConfig
            }
        }
    };
</script>
<style scoped>
    .show {
        width: 60vw;
        margin: 50px auto 0;
        padding: 50px 0;
    }
</style>